<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>网页版2048游戏</title>
  <style>
    /* 游戏棋盘格 */
    body {
      font-family: Arial;
      text-align: center;
    }

    .game {
      margin: 0 auto;
      /*margin-top:40px;*/
      text-align: center;
      display: inline-block;
    }

    .game-score {
      font-size: 20px;
      margin: 20px auto;
    }

    .game-container {
      background-color: #bbada0;
      border-radius: 10px;
      position: relative;
    }

    .game-cell {
      border-radius: 6px;
      background-color: #ccc0b3;
      position: absolute;
    }

    .game-num {
      width: 0px;
      height: 0px;
      border-radius: 6px;
      font-weight: bold;
      font-size: 40px;
      color: #fff;
      text-align: center;
      position: absolute;
    }

    .game-num-2 {
      background: #eee4da;
      color: #776e65;
    }

    .game-num-4 {
      background: #ede0c8;
      color: #776e65;
    }

    .game-num-8 {
      background: #f2b179;
    }

    .game-num-16 {
      background: #f59563;
    }

    .game-num-32 {
      background: #f67c5f;
    }

    .game-num-64 {
      background: #f65e3b;
    }

    .game-num-128 {
      background: #edcf72;
      font-size: 35px;
    }

    .game-num-256 {
      background: #edcc61;
      font-size: 35px;
    }

    .game-num-512 {
      background: #9c0;
      font-size: 35px;
    }

    .game-num-1024 {
      background: #33b5e5;
      font-size: 30px;
    }

    .game-num-2048 {
      background: #09c;
      font-size: 30px;
    }

    /*游戏结束*/
    .game-over {
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 10px;
      box-sizing: border-box;
      z-index: 1;
      display: table;
      background: rgba(123, 102, 85, 0.5)
    }

    .game-over-info {
      display: table-cell;
      vertical-align: middle
    }

    .game-over p {
      font-size: 45px;
      color: #fff;
      margin: 20px auto;
    }

    .game-over span {
      cursor: pointer;
      background-color: rgba(103, 82, 65, 0.6);
      display: block;
      margin: 20px auto;
      width: 180px;
      padding: 10px 10px;
      font-size: 25px;
      color: #f7f2e5;
      border-radius: 10px;
      border: 1px solid #978271;
      transition: all .2s
    }

    .game-over span:hover {
      background-color: rgba(103, 82, 65, 0.7);
      color: #fff
    }

    .game-hide {
      display: none;
    }
  </style>
</head>

<body>
  <div id="game" class="game">
    <div class="game-score">分数：<span id="game_score">0</span></div>
    <div id="game_container" class="game-container">
      <div id="game_over" class="game-over game-hide">
        <div class="game-over-info">
          <div id="game_over_info"></div>
          <span id="game_restart">重新开始</span>
        </div>
      </div>
    </div>
  </div>
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/Game2048.js"></script>
  <script>
    Game2048({ prefix: 'game', len: 4, size: 100, margin: 20 });
  </script>
  <a href="../首页/page11.html">
    <h2>返回上一页面</h2>
  </a>
</body>

</html>